<template>
  <div id="app">
    <Child :title="msg" @child-click="handlerChildClick" />
    <ToDoList v-on:add-list="addList" @remove-all="removeAll" />
    <div class="box">
      <h2>这里是代办清单</h2>
      <ul v-for="(item,index) in listData" :key="index">
        <li>{{index+1}}--{{item}}</li>
      </ul>
    </div>
  </div>

</template>

<script>
  import { ref } from "vue";
  import Child from "./components/Child.vue";
  import ToDoList from "./components/ToDoList.vue";
  export default {
    components: { Child, ToDoList },

    setup() {
      const msg = ref("我是父组件的值");
      const listData = ref([]);
      const handlerChildClick = (msg) => {
        alert(msg);
      }

      //添加数据
      const addList = value => {
        listData.value.push(value)
      }

      //重置数据
      const removeAll = () => {
        listData.value = [];
      }


      return {
        msg,
        handlerChildClick,
        removeAll,
        addList,
        listData
      };
    }
  };
</script>

<style scoped>
  .box{
    height: 600px;
    width: 200px;
    background-color: #ccc;
  }
</style>